<template>
	<view  class="vedioContent">
			<view class="vedioCategoryImg">
					<view class="img" v-for="(item,index) in imgData" :key="index">
						<image :src="item.img" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
			</view>
	</view>
</template>

<script>
	export default {
		props:{
			url:String
		},
		mounted() {
			this.getList()
		},
		data() {
			return {
				imgData:[]
			};
		},
		methods:{
			getList(){
				this.request({
					url:this.url
				}).then(res => {
					console.log(res.data.res)
					this.imgData = res.data.res.category
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.vedioContent{
		height: calc(100vh-36rpx);
		.vedioCategoryImg{
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			.img{
				width: 50%;
				height: 450rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
					border: 5rpx solid #fff;
				}
				text{
					color: #fff;
					font-size: 60rpx;
					font-weight: 700;
					position: absolute;
					bottom:10rpx;
					left: 75rpx;
				}
			}
			
		}
	}

</style>
